<template>
  <div class="Songlistcollector">
    <div class="main">
      <div class="imglist" v-for="(item,index) in subscribers" :key="index">
        <img :src="item.avatarUrl" alt="">
        <p>{{item.nickname}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Songlistcollector',
  data() {
    return {
      limit: 60,
      offset: 0
    }
  },

  mounted() {
    this.$store.dispatch('getSonglistDetails', { id: this.$route.query.id })
    this.$store.dispatch('getSonglistcollector', { id: this.$route.query.id, limit: this.limit })
  },
  computed: {
    ...mapState({
      playlist1: state => state.playlist.playlist1,
      subscribers: state => state.playlist.subscribers
    })
  }
}
</script>

<style lang="less" scoped>
.Songlistcollector {
  .main {
    display: flex;
    display: grid;
    grid-template-columns: auto auto auto;
    .imglist {
      align-items: center;
      display: flex;
      margin-bottom: 20px;
      img {
        width: 90px;
        height: 90px;
        border-radius: 50px;
      }
      p {
        opacity: 0.8;
        margin-left: 10px;
      }
      img:hover {
        cursor: pointer;
      }
      p:hover {
        opacity: 1;
        cursor: pointer;
      }
    }
  }
}
</style>